<script setup>
import { ref, reactive,  computed ,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted } from 'vue'
import useFormEvent from '@/core/hooks/useFormEvent'
import articleApi from '@/api/content/ArticleApi'
import tagsApi from '@/api/content/TagsApi'
import columnApi from '@/api/content/ColumnApi'
import DEditor from '@/components/DEditor.vue'
import ImageSelecter from '@/components/ImageSelecter.vue'
const formRef = ref() // 表单ID

const state = reactive({
  visible: false,
  loading: false,
  activeKey: 'base',
  tagsOptions: [],
  columnTreeOptions: []
})

// 表单数据
const formState = reactive({})
// 表单结构
const original = {
  id: '',
  columnId: '',
  title: '',
  thumb: '',
  author: '',
  summary: '',
  content: '',
  idx: 0,
  tags: []
}
// 表单 处理
const { onCancel, onFinish, InitializeData } = useFormEvent({state: state, remoteApi: articleApi, formState: formState, original: original, formRef: formRef})
// 重写初始化
const initializationData = primaryKey=>{
  InitializeData(primaryKey).then(()=>{
    // console.info('重写初始化')
    formState.thumb = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
  })
}

// 向父组件暴露方法和属性
//defineExpose({ InitializeData })
defineExpose({ InitializeData: initializationData })


//过滤选中项
const filteredTags = computed(() => state.tagsOptions.filter(o => !formState.tags.includes(o.value)))

console.log('vue3中的setup')

onBeforeMount(() => {
  console.log('vue3 中的生命周期 onBeforeMount')
})
// 加载选项
onMounted(() => {
  // console.log('vue3 中的生命周期 onMounted ')
  // 加载标签
  tagsApi.getOptions().then(res=>{
    state.tagsOptions = res.data
  })
  // 加载栏目
  columnApi.getTreeOptions().then(res => {
    state.columnTreeOptions.push(res.data)
  })
})

onBeforeUpdate(() => {
  console.log('vue3 中的生命周期 onBeforeUpdate')
})

onUpdated(() => {
  console.log('vue3 中的生命周期 onUpdated')
})

onBeforeUnmount(() => {
  console.log('vue3 中的生命周期 onBeforeUnmount')
})

onUnmounted(() => {
  console.log('vue3 中的生命周期 onUnmounted')
})
</script>
<template>
  <a-drawer
    v-model:visible="state.visible"
    :title="`文章管理`"
    placement="right"
    :width="'80%'"
  >
    <template #extra>
      <a-button type="link" @click="state.visible=false">关闭</a-button>
    </template>
    <a-card hoverable>
      <!-- 表单内容 begin -->
      <a-form
        ref="formRef"
        :model="formState"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 10}"
        :scroll-to-first-error="true"
        @finish="onFinish"
      >
        <a-tabs v-model:activeKey="state.activeKey" centered>
          <a-tab-pane key="base">
            <template #tab>
              <span><group-outlined /> 基本信息</span>
            </template>
            <a-row>
              <a-col :span="24">
                <a-form-item
                  label="标题" name="title" :label-col="{span:3}"
                  :rules="[{ required: true, message: '请输入标题!' }]"
                >
                  <a-input
                    v-model:value="formState.title" show-count :minlength="2" :maxlength="120" allow-clear
                    size="large" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="作者" name="author">
                  <a-input
                    v-model:value="formState.author" show-count :minlength="2" :maxlength="20" allow-clear
                    size="large" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item
                  label="类型" name="type" :rules="[{ required: true, message: '请输入类型!' }]">
                  <a-radio-group v-model:value="formState.type" button-style="solid">
                    <a-radio-button value="NONE">常规</a-radio-button>
                    <a-radio-button value="OTHE">其他</a-radio-button>
                  </a-radio-group>
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item
                  label="标签" name="tags" :label-col="{span:3}"
                  :rules="[{ required: true, message: '请输入标签!' }]"
                >
                  <a-select
                    v-model:value="formState.tags"
                    mode="multiple" size="large" allow-clear
                    placeholder="请输入标签!"
                    :options="filteredTags"
                  />
                </a-form-item>
              </a-col> 
              <a-col :span="12">
                <a-form-item
                  label="栏目" name="columnId"
                  :rules="[{ required: true, message: '请输入栏目!' }]">
                  <a-tree-select
                    v-model:value="formState.columnId" placeholder="请输入栏目" show-search allow-clear
                    :tree-default-expand-all="true" :tree-data="state.columnTreeOptions" />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item
                  label="排序" name="idx" :rules="[{ required: true, message: '请输入排序'}]">
                  <a-input-number v-model:value="formState.idx" :min="0" :max="100" allow-clear />
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item
                  label="缩图" name="thumb" :label-col="{span:3}" :wrapper-col="{ span: 21}"
                >
                  <a-form-item-rest>
                    <image-selecter v-model="formState.thumb" :limit="1" />
                  </a-form-item-rest>
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item
                  label="简介" name="summary" :label-col="{span:3}" :wrapper-col="{ span: 18}" :rules="[{ required: true, message: '请输入summary'}]">
                  <a-textarea v-model:value="formState.summary" :rows="4" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane key="content" force-render>
            <template #tab>
              <span><file-markdown-outlined /> 详细内容</span>
            </template>
            <a-row>
              <a-col :span="24">
                <a-form-item
                  label="详细内容" name="content" :label-col="{span:0}" :wrapper-col="{ span: 24}">
                  <d-editor v-model:value="formState.content" :disabled="false" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
        <a-row>
          <a-col :span="24">
            <a-form-item name="id">
              <a-space wrap>
                <a-button type="primary" html-type="submit" size="large" block :loading="state.loading">保存</a-button>
                <a-button size="large" block @click="onCancel">取消</a-button>
                <a-input v-model:value="formState.id" type="hidden" />
              </a-space>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
  </a-drawer>
</template>
<style>
/* you can make up upload button and sample style by using stylesheets */
.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>